<template>
<form @submit="formSubmit" class='repair-form' report-submit>
  <div class="repairContainer">
        <div class='form-wrap'>
           <scroll-view style='height:100%;' :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" > 
             <div class='info-title'>
                <image src='/static/images/repair_icon_describe@3x.png'/>
                <span>处置结果</span>
                <div class='scanCode' @click.stop='scanCode' v-if='type!=0'>
                  <image src='/static/images/nav_scan_blue_b@3x.png'/>
                </div>
              </div>
              <div class='info-wrap'>
                <i-row>
                      <i-col span="24" i-class='desc-wrap'>
                        <textarea placeholder="不超过100个字" class='desc' v-model='comment'/>
                      </i-col>
                </i-row>
              </div>
              <div class='info-title'>
                <image src='/static/images/repair_icon_photo@3x.png'/>
                <span>现场照片</span>
              </div>
              <div class='info-wrap'>
                <!-- <i-row>
                      <mp-uploader ref="uploader" @upLoadSuccess="upLoadSuccess" @upLoadFail="upLoadFail" @uploadDelete="uploadDelete" :showTip=true :count=3 :maxLength=3></mp-uploader>
                      <i-col span="6" i-class='camera-wrap'>
                        <i-icon type="camera" color='#0886d5' size='34' />
                      </i-col>
                </i-row> -->
                  <div class='weui-uploader__bd p10'>
                     <div class="weui-uploader__files" id="uploaderFiles">
                        <block v-for="(item,index) in files" :key="index">
                          <div class="weui-uploader__file camera-wrap image-wrap" @click="previewImage($event,index)" :id="item">
                            <i-icon type="delete_fill" i-class='del-btn' @click.stop="deletImg(index)" size='24' color='#da1e2f'/>
                            <image class="weui-uploader__img" :src="item" mode="aspectFit" />
                          </div>
                        </block>
                      </div>
                      <div class='camera-wrap' @click="chooseImage">
                          <img src='/static/images/repair_btn_photo@3x.png' class='camera-wrap-img'/>
                      </div>
                  </div>
              </div>
              <div v-if='type==1||type==2'>
                <div class='info-title'>
                  <image src='/static/images/repair_icon_describe@3x.png'/>
                  <span v-if='type==1'>巡检信息</span>
                  <span v-if='type==2'>维保信息</span>
                </div>
                <div class='card-wrap'>
                    <div class='card-title'>
                        <div>
                          <img src='/static/images/repair_icon_checkpoint@3x.png'/>
                          <span v-if='type==1'>巡检点</span>
                          <span v-if='type==2'>维保点</span>
                        </div>
                        <div>
                          <span class='blue'>{{handled}}/</span><span class='black' v-if='order'>{{order.points.length}}</span>
                        </div>
                    </div>
                    <div class='card-title' v-if='order'>
                      <span class='blue'>{{order.planName}}</span>
                    </div>
                    <div v-if='order && order.points'>
                      <div class='deal-item border0' v-for='(point,index) in order.points' :key='index'>
                          <div class='circle'></div>
                          <div class='point-content'>
                              <div class='point-info'>
                                <div class='point-name'>{{point.pointName}}</div>
                                <div><span class='mr10'>{{pointType[point.pointType]}}</span>{{point.pointPos}}</div>
                              </div>
                              <div class='point-state' v-if='point.result!=0'>
                                <img v-if='point.result==1' src='/static/images/icon_pass@2x.png'/>
                                <img v-if='point.result==2' src='/static/images/icon_notpass@2x.png'/>
                                <div class='font-sm'>{{point.result==1?'正常':'异常'}}</div>
                                <div class='font-sm'>{{point.dealTimeStr}}</div>
                              </div>
                          </div>
                      </div> 
                    </div>
                </div>
              </div>
              <div v-else>
                  <div class='info-title' >
                      <image src='/static/images/user_icon_mywo@3x.png'/>
                      <span>物料</span>
                  </div>
                  <div class='info-wrap' @click='addMaterial'>
                      <div class='info-line'><div class='info-label'>未领料</div></div>
                      <div class='info-line'>
                        <div class='info-label'>点击进入领料</div>
                        <i-icon type="enter" color="#80848f" i-class='arrow-right'/>
                      </div>
                  </div>
              </div>
          </scroll-view>
        </div>
         <div class='btn-line'>
              <button class='btn-default red' @click='pause'>{{type==1?'中止':'挂起'}}</button>
              <button class='btn-default' @click='finish'>完成</button>
         </div>
  </div>
  <i-toast id="toast" />
  </form>
</template>

<script type="text/javascript">
import { mapState , mapActions} from 'vuex';
import mpUploader from 'mpvue-weui/src/uploader';
import { $Toast } from '@/../static/iview/base/index';
export default {
  data() {
    return {
      pointType:['设备','区域'],
      files: [],
      filesOnline: [],
      comment:'',
      type:0,
      order:null,
      orderId:''
    }
  },
  onShow(){
    var params = this.$root.$mp.query;
    if(params.orderId) this.orderId = params.orderId;
    if(params.type) this.type = params.type;
    if(this.type!=0) this.queryOrderInfo();
  },
  components: {
    mpUploader
  },
  computed:{
    ...mapState(['userInfo']),
    handled:function(){
      let num = 0;
      if(this.order && this.order.points){
        this.order.points.map(point=>{
          if(point.result!=0) num+=1;
        })
      }
      return num;
    }
  },
  methods:{
    ...mapActions([
        'getOrderDetail'
    ]),
    upLoadSuccess(successRes){
      console.log('successRes',successRes)
    },
    upLoadFail(failRes){
      console.log('failRes',failRes)
    },
    uploadDelete(DeleteRes){
      console.log('DeleteRes',DeleteRes)
    },
    chooseImage(e) {
      var _this = this;
      wx.chooseImage({
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          _this.files = _this.files.concat(res.tempFilePaths)
          
          //var tempFilePaths = res.tempFilePaths
          // console.log(tempFilePaths)
          
          /* wx.getFileSystemManager().readFile({
            filePath: tempFilePaths[0], //选择图片返回的相对路径
            encoding: 'base64', //编码格式
            success: res => { //成功的回调
              //_this.filesOnline = _this.filesOnline.concat(JSON.parse(res.data).data)
              //'data:image/png;base64,' + 
              _this.filesOnline.push(res.data)
            }
          }) */
          
        },
        fail: function () {
          console.log('fail');
        },
        complete: function () {
          console.log('commplete');
        }
      })
    },
    uploadImg(orderId){
      var _this = this;
      this.files.map(item=>{
          wx.uploadFile({
            url: 'http://192.168.0.154:8081/wo/app/order/uploadImg',    //模拟接口 
            filePath: item,
            name: 'file',
            header: {  
              "Content-Type": "multipart/form-data"  
            },  
            formData: {
              ukey: _this.userInfo.ukey,
              userId: _this.userInfo.userId,
              type:7,
              orderId
            },
            success: function(res){
              if(res.statusCode==200){
                _this.filesOnline = _this.filesOnline.concat(JSON.parse(res.data))
                console.log('_this.filesOnline',_this.filesOnline)
              }
            }
          })
        })
    },
    previewImage(e) {
      wx.previewImage({
        current: e.currentTarget.id, // 当前显示图片的http链接
        urls: this.files // 需要预览的图片http链接列表
      })
    },
    deletImg(index){
      this.files.splice(index,1)
      this.filesOnline.splice(index,1)
    },
    scanCode(){
      var _this = this;
      wx.scanCode({
        success(res){
          if(res.errMsg=='scanCode:ok'){
            var data = JSON.parse(res.result);
            wx.navigateTo({
              url:`/pages/point_dispose/main?type=${_this.type}&orderId=${_this.orderId}&objectId=${data.id}&pointType=${data.type}`
            })
          }
        }
      })
    },
    pause(){
      wx.navigateTo({
        url:`/pages/order_pause/main?type=${this.type}&orderId=${this.orderId}`
      })
    },
    finish(){
      var _this = this;
      var data = {
          ukey:this.userInfo.ukey,
          comment:this.comment
      };
      var url;
      if(this.type==0){
        url = '/order/finishFaultOrder2';
        data.orderId = this.orderId;
      }else if(this.type==1){
        if(this.handled<this.order.points.length){
          $Toast({
                content: '处置没有完成'
          });
          return;
        }
        url = '/order/finishInspectOrder';
        this.order.inspectTime = new Date().getTime();
        data.order = JSON.stringify(this.order);
      }else if(this.type==2){
        if(this.handled<this.order.points.length){
          $Toast({
                content: '处置没有完成'
          });
          return;
        }
        url = '/order/finishMaintenanceOrder';
        data.order = JSON.stringify(this.order);
      }else if(this.type==3){
        url = '/order/finishAffairOrder3';
        data.orderId = this.orderId;
      }
       this.$http.post({url,data}).then(res=>{
        if(res.s==0){
          wx.navigateBack({delta:2})
        }
      }).then(res=>{
        if(this.files.length>0){
          this.uploadImg(res.i.Data.orderId)
        }
      }).catch(e=>{
        console.log('完成工单失败',e)
      }) 
    },
    queryOrderInfo(){
      this.getOrderDetail(this.orderId).then((res)=>{
          if(res){
              this.order = res;
          }
      })
    },
    addMaterial(){
      wx.navigateTo({
        url:`/pages/add_material/main?type=${this.type}&orderId=${this.orderId}`
      })
    }
  }
}
</script>

<style lang='less'>
page{
  height:100%;
  background:#eef7fd;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.repair-form{
  height: 100%
}
.repairContainer{
    height:100%;
    display: flex;
    flex-direction: column;
    .form-wrap{
      flex:1;
      height:50rpx;
      .scanCode{
        float: right;
        width: 40rpx;
        height: 40rpx;
        margin-right:20rpx; 
        image{
          width: 100%;
          height: 100%;
          margin: 0!important
        }
      }
      .info-title{
        height: 90rpx;
        line-height: 90rpx;
        font-size:32rpx;
        color:#83878a;
        image{
          width:30rpx;
          height: 30rpx;
          vertical-align: middle;
          margin:-10rpx 20rpx 0 30rpx 
        }
      }
      .info-wrap{
        display: flex;
        flex-direction: column;
        margin:0 20rpx;
        border:1px solid #ddd;
        border-radius:8rpx;
        background: #fff;
        .info-line{
          display: flex;
          justify-content:space-between;
          line-height:60rpx;
          padding: 10rpx 0;
          border-bottom:1px solid #dfe3e5;
          &:last-child{
            border-bottom:none;
          }
        }
        .info-label{
          font-size:30rpx;
          color: #8a8a8a;
          margin-left:20rpx; 
          &.label-type{
            align-self:center;
          }
        }
        .info-content{
          flex:1;
          padding-left:20rpx; 
        }
        .arrow-right{
          align-self: center;
          margin-right:20rpx; 
        }
        .desc-wrap{
          display: flex;
        }
        .desc{
          flex:1;
          padding: 16rpx;
          height:140rpx;
        }
        .camera-wrap{
          float: right;
          width: 120rpx;
          height: 120rpx;
          border-radius:16rpx; 
          margin:0 16rpx;
          background: #f0f6f6;
          display: flex;
          align-items: center;
          justify-content: center;
          .camera-wrap-img{
            width: 54rpx;
            height: 54rpx;
          }
        }
        .image-wrap{
          float: left;
          position: relative;
          margin-left:0; 
          .del-btn{
            position:absolute;
            right: -16rpx;
            top:-16rpx;
          }
        }
        .p10{
          padding: 20rpx;
        }
        .weui-uploader__img{
          width: 120rpx;
          height: 120rpx;
          border-radius:16rpx; 
        }
      }
    }
    .mr10{
      margin-right:30rpx; 
    }
    .btn-line{
        display: flex;
        justify-content: center;
        padding: 20rpx;
        .btn-default{
            flex:1;
            margin: 0 20rpx;
            background: #1380d3;
            color:#fff!important;
            font-size:36rpx;
            border-radius:40rpx; 
            height: 80rpx;
            line-height: 80rpx;
            max-width: 50%;
            padding: 0;
            &.green{
                background: #59b320;
            }
            &.red{
                background: #ff554d
            }
        }
    }
    .deal-item{
        display: flex;
        color:#000;
        align-items: center;
        margin: 10rpx 20rpx;
        line-height: 120rpx;
        border-bottom:2rpx solid #e6e6e6;
        justify-content: space-between;
        &.border0{
            margin: 0 20rpx;
            border-bottom: none;
            &:last-child{
                margin: 0;
                padding: 0 20rpx;
            }
        }
        &.border{
            border-bottom:2rpx solid #e6e6e6!important;
        }
        &:last-child{
            border-bottom: none;
            .point-content{
                border-bottom: none;
            }
        }
        .value{
            margin-right:20rpx;
            font-size:30rpx;
        }
        .user-img{
            height:80rpx;
            margin-right:16rpx; 
            img{
                width: 80rpx;
                height:80rpx;
                border-radius: 8rpx;
            }
        }
        .phone{
            height:100rpx;
            justify-items:end ;
            img{
                width: 50rpx;
                height:50rpx;
                border-radius: 8rpx;
            }
        }
        .user-info{
            flex:1;
            display: flex;
            flex-direction: column;
            line-height: 60rpx;
            font-size:30rpx
        }
        .time,.dealType{
          margin-right:26rpx; 
        }
        .time{
            line-height: 40rpx;
            text-align: center
        }
        .circle{
            width:20rpx;
            height: 140rpx;
            margin-left:20rpx;
            margin-right:10rpx;
            position:relative;
            &:before{
                content:'';
                display:inline-block;
                position: absolute;
                left:50%;
                top:0;
                width:1px;
                height: 140rpx;
                background:#e0e0e0;
            }
            &:after{
                content:'';
                display:inline-block;
                position: absolute;
                left:50%;
                top:50%;
                width:20rpx;
                height: 20rpx;
                border-radius: 12rpx;
                margin-left:-12rpx;
                margin-top:-12rpx;
                background:#fff;
                border:4rpx solid #e0e0e0;
            }
        }
        .point-content{
            display: flex;
            flex:1;
            justify-content: space-between;
            align-items: center;
            .point-info{
              flex:1;
              line-height: 50rpx;
            }
            border-bottom:2rpx solid #e6e6e6;
            color: #a4a4a4;
            line-height: 60rpx;
            font-size:30rpx;
            padding: 10rpx;
            .point-name{
                color:#308fc9;
            }
            .point-state{
              display: flex;
              flex-direction: column;
              align-items: center;
              img{
                  width: 48rpx;
                  height: 48rpx;
              }
              .font-sm{
                font-size:24rpx;
                line-height: 30rpx;
                color: #a4a4a4;
              }
            }
        }
        
    }
    .card-wrap{
      background: #fff;
      margin:20rpx;
      border:1px solid #ddd;
      border-radius:8rpx;
    }
    .card-title{
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 15rpx;
        border-bottom:1px solid #e6e6e6;
        font-size:32rpx;
        color: #a4a4a4;
        display: flex;
        justify-content: space-between;
        .blue{
            color:#308fc9;
            padding-left: 20rpx;
        }
        .black{
          color: #000
        }
        img{
            width: 36rpx;
            height: 36rpx;
            margin: 10rpx;
            margin-top:0rpx;
            vertical-align: middle; 
        }
    }
  }
  
</style>
